<!doctype html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="utf-8">
  <title>某某应用下载动态命名微信扫码提示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <!-- 让国内浏览器如360使用谷歌或最新版ie内核渲染 -->
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap {
      height: 100vh;
      width: 100vw;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(./bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    .logo {
      position: absolute;
      width: 100px;
      top: 17%;
      left: 10%;
    }
    .download {
      display: block;
      position: absolute;
      bottom: 17%;
      height: 44px;
      left: 10%;
      width: 80%!important;
      outline: none;
      text-decoration: none;
    }
    .download-btn {
      border-radius: 25px;
      width: 100%;
      height: 44px;
      line-height: 44px;
      border: none;
      opacity: .85;
      font-size: 18px;
      outline: none;
      text-decoration: none;
      text-align: center;
      color: #000;
      background: linear-gradient(45deg, #D0AB68, #E3CD8A);
    }
    .hint {
      font-size: 12px;
      color: #FFC030;
      text-align: center;
      position: absolute;
      bottom: 17%;
      width: 100%;
      margin-bottom: -38px;
    }
    .weixin-pop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .7);
      display: none;
    }
    .weixin-pop .img {
      max-width: 95%;
      display: block;
      margin: 40px auto;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <!-- <img class="logo" src="./logo.png" alt=""> -->
    <a class="download" id="download" href="" download>
      <button class="download-btn">下载</button>
    </a>
    <div class="hint"><span style="color: red">*</span>注：12312312312312312</div>
  </div>
  <div class="weixin-pop" id="weixinPop">
    <img class="img" src="./weixin-pop.png" alt="">
  </div>
  <script type="text/javascript">
    // 当前是否是微信浏览器 微信官方js判断做法
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if(isWeixin) {
      var weixinPop = document.getElementById('weixinPop');
      weixinPop.style.display = 'block';
    }
    // 逻辑开始
    // 下载示例地址 https://www.xx.com/index.html?id=123
    var url = new URL(location.href);
    var params = new URLSearchParams(url.searchParams);
    params = Object.fromEntries(params);
    var filename = 'xx_'+params.salesmanId;
    if(!filename) {
      alert('访问地址错误');
    }
    var download = document.getElementById('download');
    download.setAttribute('href', `https://www.xxx.com/download.php?fileName=${filename}`);
  </script>
</body>
</html>